<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../easyui/jquery.min.js"></script>
    <script src="../easyui/jquery.easyui.min.js"></script>
    <script src="../easyui/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" href="../easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" href="../easyui/themes/icon.css">
    <script>
        $(function(){
            $("#layout").layout({
                fit:true
            });
            $("#tree").tree({
                url:'tree.json',
                onClick:function(node){
//                    console.log(node);
                    if(node.attributes === undefined || node.attributes.url === undefined)
                    {
                        return;
                    }
//                    $("#tabs").tabs("add",{
//                        title:node.text,
//                        closable:true,
//                        content: '<iframe scrolling="no" frameborder="0" src="'+node.attributes.url+'" style="width:100%;height:100%;"></iframe>'
//                    })
                    tabop.add("#tabs",node.text,node.attributes.url);
                }
            });
            //使用iframe可以避免id冲突问题，如果不设置fit:true会导致iframe高度不会扩充整个tab页
            $("#tabs").tabs({
                fit:true
            })

            var tabop = {
                add:function(id,title,url){
                    var $tabs = $(id);
                    var bool = $tabs.tabs("exists",title);
                    if(bool){

                    }else{
                        $tabs.tabs("add",{
                            title:title,
                            closable:true,
                            content: '<iframe scrolling="no" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>'
                        })
                    }
                }
            };

        })

    </script>
</head>
<body>

    <div id="layout">
        <div data-options="region:'north'" style="height: 100px">

        </div>
        <div data-options="region:'south'"></div>
        <div data-options="region:'west'" style="max-width: 200px">
            <div id="tree"></div>
        </div>
        <!--<div data-options="region:'east'"></div>-->
        <div data-options="region:'center'">
            <div id="tabs">
                <div title="首页"></div>
            </div>
        </div>
    </div>
</body>
</html>